<template>
  <house>
    <!--我是设备监控  -->
    <div class="Mondi">
      <EquipmentmonitoringVue
        v-for="(item, index) in arr"
        :key="index"
        @eqtoring="fn1(index)"
        @eqtoring1="fn2(index)"
        @eqtoring2="fn3(index)"
        :title="item"
        ref="abc"
        :heights="numarr[index]"
      ></EquipmentmonitoringVue>
    </div>
  </house>
</template>

<script setup>

import EquipmentmonitoringVue from "../../components/Equipmentmonitoring.vue";
import house from "../../components/hose.vue";
import { ref } from "vue";

const arr = ref(["运行中", "运行中", "运行中", "已关机", "设备故障"]);
const numarr = ref(["50%", "70%", "90%", "20%", "10%"]);

const abc = ref(null);

const fn1 = (index) => {
  const setnum = setInterval(() => {
    arr.value.splice(index, 1, "已关机");
    abc.value[index].fntitle("已关机");

    clearInterval(setnum);
  }, 1000);

  arr.value.splice(index, 1, "关机中，请稍等");
  // console.log(abc.value[0].fntitle());
  abc.value[index].fntitle("设备故障");
};

const fn2 = (index) => {
  const setnum1 = setInterval(() => {
    arr.value.splice(index, 1, "运行中");
    abc.value[index].fntitle("运行中");

    clearInterval(setnum1);
  }, 1000);

  arr.value.splice(index, 1, "重启中，请勿操作");
  abc.value[index].fntitle("设备故障");
};
const fn3 = (index) => {
  console.log(3);
};
</script>

<style lang="less" scoped>
.Mondi {
  width: 1300px;
  // height: 500px;
  display: flex;
  flex-wrap: wrap;
}
</style>
